@()(implicit session: Session)
@home.main("Search"){


  <div class="row">
    <div class="form-group col-sm-12">
      <h2 class="page-heading">Condition Search</h2>
    </div>
  </div>

  <div class="row">
    <div class="col-sm-3">
      <div class="bs-docs-sidebar" role="complementary">
        <ul class="nav bs-docs-sidenav">
          <li class="active"><a href="#condition" data-toggle="tab">Gene ID</a></li>
 @*         <li><a href="#circ" data-toggle="tab">Gene Name</a></li>*@
          <li><a href="#region" data-toggle="tab">Region</a></li>
        </ul>
      </div>
    </div>

    <div class="col-sm-8 tab-content myform" >
      <div class="tab-pane active" id="condition">
        <form class="form-horizontal" method="get" id="geneIdForm">
          <h4>Required:</h4>
          <hr>
          <div class="form-group">
            <label class="control-label col-sm-2">Gene ID:</label>
            <div class="col-sm-8">

              <textarea name="geneId" id="geneId" class="form-control" rows="5"></textarea>


              <span class="help-block">e.g.,&nbsp;<a href="#"><em id="egGeneId">
                EUCur000001,EUCur000002,EUCte000001,EUCte000002</em></a></span>
            </div>
          </div>
          <hr>
          <div class="form-group">
            <div class="actions col-sm-offset-3 col-sm-3">
              <button type="button" class="btn btn-primary" style="width: 90%;" id="search" onclick="geneIdSearch()">
                Search</button>
            </div>
          </div>
        </form>
      </div>
        <!--Transcript -->
      <div class="tab-pane" id="circ">
        <form class="form-horizontal" action="circInfo" method="get" id="geneNameForm">
          <h4>Required:</h4>
          <hr>
          <div class="form-group">
            <label class="control-label col-sm-2">Gene Name:</label>
            <div class="col-sm-8">
              <textarea name="geneName" id="geneName" class="form-control" rows="5"></textarea>
              <span class="help-block">e.g.,&nbsp;<a href="#"><em id="egGeneName">
                Ncam2,Tymp,Rfesd</em></a></span>
            </div>
          </div>
          <hr>
          <div class="form-group">
            <div class="actions col-sm-offset-3 col-sm-3">
              <button type="button" class="btn btn-primary" style="width: 90%;" id="search" onclick="geneNameSearch()">
                Search</button>
            </div>
          </div>
        </form>
      </div>

      <div id="region" class="tab-pane">
        <h4>Search CircRNA profiles in a region</h4>
        <hr>
        <form class="form-horizontal" method="get" action="circInfoByPositon" id="regionForm">
          <div class="form-group">
            <label class="control-label col-sm-3">Chromosome:</label>
            <div class="col-sm-3">
              <input class="form-control chr" name="chr" id="chr">
            </div>
            <label class="control-label">e.g., <a href="#"><em id="egChr">chr1</em></a></label>
          </div>
          <div class="form-group">
            <label class="control-label col-sm-3">Start:</label>
            <div class="col-sm-3">
              <input class="form-control" name="start" id="start">
            </div>
            <label class="control-label">e.g., <a href="#"><em id="egStart">15</em></a></label>
          </div>
          <div class="form-group">
            <label class="control-label col-sm-3">End:</label>
            <div class="col-sm-3">
              <input class="form-control" name="end" id="end">
            </div>
            <label class="control-label">e.g., <a href="#"><em id="egEnd">2000000</em></a></label>
          </div>
          <div class="form-group">
            <div class="actions col-sm-offset-3 col-sm-3">
              <button type="button" class="btn btn-primary" style="width: 90%;" id="search" onclick="regionSearch()">
                Search</button>
            </div>
          </div>
        </form>
      </div>
    </div>
  </div>

  <div id="result" style="display: none">
    <hr>

    <label>Select the columns to display:</label>
    <div id="checkbox" class="checkbox">

    </div>
    <div id="toolbar">
        &nbsp;Keyword：
    </div>

    <table class="display table table-bordered" id="table" data-pagination="true" data-search="true"
    data-toolbar="#toolbar" data-page-list="[10, 25, 50, 100, all]" data-search-align="left" data-multiple-search="true"
    style="table-layout: fixed;
      word-wrap: break-word"
    >
      <thead>
        <tr>
          <th data-field='geneid' data-sortable='true' id="marker">Gene ID</th>

        </tr>
      </thead>
    </table>
  </div>


  <script>
          $(function () {
            function extractor(query) {
              var result = /([^,]+)$/.exec(query);
              if (result && result[1])
                return result[1].trim();
              return '';
            }

            $('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
              // 获取已激活的标签页的名称
              var activeTab = $(e.target).text();
              // 获取前一个激活的标签页的名称
              var previousTab = $(e.relatedTarget).text();
              $("#result").hide()
            });

            $('#egChr').click(function () {
              var eg = $(this).text().trim();
              $('#chr').val(eg);
              $("#regionForm").formValidation("revalidateField", "chr")
            });
            $('#egStart').click(function () {
              var eg = $(this).text().trim();
              $('#start').val(eg);
              $("#regionForm").formValidation("revalidateField", "start")
            });
            $('#egEnd').click(function () {
              var eg = $(this).text().trim();
              $('#end').val(eg);
              $("#regionForm").formValidation("revalidateField", "end")
            });

            $.ajax({
              url: "@routes.RnaController.getAllId()",
              async: false,
              type: "get",
              success: function (data) {
                $('#geneIdForm #geneId').typeahead({
                  source: data,
                  updater: function (item) {
                    return this.$element.val().replace(/[^,]*$/, '') + item + ',';
                  },
                  matcher: function (item) {
                    var tquery = extractor(this.query);
                    if (!tquery) return false;
                    return ~item.toLowerCase().indexOf(tquery.toLowerCase())
                  },
                  highlighter: function (item) {
                    var query = extractor(this.query).replace(/[\-\[\]{}()*+?.,\\\^$|#\s]/g, '\\$&')
                    return item.replace(new RegExp('(' + query + ')', 'ig'), function ($1, match) {
                      return '<strong>' + match + '</strong>'
                    })
                  }
                })
              }
            })

            $.ajax({
              url: "@routes.RnaController.getAllChr()",
              async: false,
              type: "get",
              success: function (data) {
                $('#chr').typeahead({
                  source: data
                })
              }
            });

            $('#egGeneId').click(function () {
              var eg = $("#egGeneId").text().trim();
              $('#geneId').val(eg);
              $("#geneIdForm").formValidation("revalidateField", "geneId")
            });

            $('#egGeneName').click(function () {
              var eg = $("#egGeneName").text().trim();
              $('#geneName').val(eg);
              $("#geneNameForm").formValidation("revalidateField", "geneName")
            });

            var array = ["Chr", "Start", "End",  "GOs", "NOG", "Function", "KO", "KEGG_GENE_NAME","NR_tophit_name",
              "NR_tophit_description","Swissprot_tophit_name", "Swissprot_tophit_description"];

            var values = ["chr", "start", "end", "gos", "nog", "function", "ko", "keggGeneName", "nrTophitName",
              "nrTophitDescription","swissprotTophitName", "swissprotTophitDescription"];
            var thHtml="";
            $.each(array, function (i, v) {
              thHtml += "<th data-field='" + values[i] + "' data-sortable='true'>" + v + "</th>"
            });
            $("#marker").after(thHtml);
            var html = "";
            $.each(array, function (n, value) {
                      html += "<label style='margin-right: 15px'>" +
                              "<input type='checkbox' checked='checked' value='" + values[n] + "' onclick=\"setColumns('" + values[n] + "')\">" + value +
                              "</label>"
                    }
            );
            $("#checkbox").append(html)

            $('#table').bootstrapTable({});
            var hiddenArray = ["nrTophitName","nrTophitDescription","swissprotTophitName","swissprotTophitDescription"];
            $.each(hiddenArray, function (n, value) {
                      $('#table').bootstrapTable('hideColumn', value);
                      $("input:checkbox[value=" + value + "]").attr("checked", false)
                    }
            );

            formValidation()

          });

          function formValidation() {
            $('#geneIdForm').formValidation({
              framework: 'bootstrap',
              icon: {
                valid: 'glyphicon glyphicon-ok',
                invalid: 'glyphicon glyphicon-remove',
                validating: 'glyphicon glyphicon-refresh'
              },
              fields: {
                geneId: {
                  validators: {
                    notEmpty: {
                      message: 'Gene Id is required！'
                    }
                  }
                }
              }
            });
            $('#geneNameForm').formValidation({
              framework: 'bootstrap',
              icon: {
                valid: 'glyphicon glyphicon-ok',
                invalid: 'glyphicon glyphicon-remove',
                validating: 'glyphicon glyphicon-refresh'
              },
              fields: {
                geneName: {
                  validators: {
                    notEmpty: {
                      message: 'Gene Name is required！'
                    }
                  }
                }
              }
            });
            $('#regionForm').formValidation({
              framework: 'bootstrap',
              icon: {
                valid: 'glyphicon glyphicon-ok',
                invalid: 'glyphicon glyphicon-remove',
                validating: 'glyphicon glyphicon-refresh'
              },
              fields: {
                chr: {
                  validators: {
                    notEmpty: {
                      message: 'Chromosome is required！'
                    }
                  }
                },
                start: {
                  validators: {
                    notEmpty: {
                      message: 'Start is required！'
                    },
                    integer: {
                      message: 'Start must be integer！'
                    }

                  }
                },
                end: {
                  validators: {
                    notEmpty: {
                      message: 'End is required！'
                    },
                    integer: {
                      message: 'End must be integer！'
                    }

                  }
                },
              }
            });

          }

          function geneNameSearch() {
            var form = $("#geneNameForm")
            var fv = form.data("formValidation");
            fv.validate();
            if (fv.isValid()) {
              $("#search").attr("disabled", true).html("Search...");
              $.ajax({
                url: "/MARDB/search/searchByGeneName",
                type: "post",
                data: $("#geneNameForm").serialize(),
                success: function (data) {
                  $('#table').bootstrapTable("load", data);
                  $("#search").attr("disabled", false).html("Search").blur();
                  $("#result").show()
                }
              });
            }
          }

          function regionSearch() {
            var form = $("#regionForm")
            var fv = form.data("formValidation");
            fv.validate();
            if (fv.isValid()) {
              var index = layer.load(1, {
                shade: [0.1, '#fff']
              });
              $("#search").attr("disabled", true).html("Search...");
              $.ajax({
                url: "@routes.RnaController.searchByRegion()",
                type: "post",
                data: $("#regionForm").serialize(),
                success: function (data) {
                  $('#table').bootstrapTable("load", data);
                  $("#search").attr("disabled", false).html("Search").blur();
                  layer.close(index);
                  $("#result").show()
                }
              });
            }
          }

          function geneIdSearch() {
            var form = $("#geneIdForm")
            var fv = form.data("formValidation");
            fv.validate();
            if (fv.isValid()) {
              var index = layer.load(1, {
                shade: [0.1, '#fff']
              });
              $("#search").attr("disabled", true).html("Search...");
              $.ajax({
                url: "@routes.RnaController.searchById()",
                type: "post",
                data: $("#geneIdForm").serialize(),
                success: function (data) {
                  $('#table').bootstrapTable("load", data);
                  $("#search").attr("disabled", false).html("Search").blur();
                  layer.close(index);
                  $("#result").show()
                }
              });
            }
          }

          function setColumns(value) {
            var element = $("input:checkbox[value=" + value + "]")
            if (element.is(":checked")) {
              $('#table').bootstrapTable('showColumn', value);
            } else {
              $('#table').bootstrapTable('hideColumn', value);
            }
          }
  </script>





}